<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="订单编码">
              <a-input placeholder="请输入订单编码" v-model="queryParam.orderNo"></a-input>
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="买家昵称">
              <a-input placeholder="请输入买家昵称" v-model="queryParam.nickname"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="用户手机号">
              <a-input placeholder="请输入用户手机号" v-model="queryParam.phone"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="收货人/电话">
              <a-input placeholder="请输入收货人/电话" v-model="queryParam.addressInfo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="shopType==1">
            <a-form-item label="店铺">
              <a-input placeholder="请输入店铺" v-model="queryParam.shopName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="shopType==1">
            <a-form-item label="供应商">
              <a-input placeholder="请输入供应商" v-model="queryParam.supplierName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="shopType==1">
            <a-form-item label="订单类型">
              <j-dict-select-tag v-model="queryParam.type" dictCode="item_type" placeholder="全部"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="支付方式">
              <j-dict-select-tag v-model="queryParam.payChannel" dictCode="pay_channel_back" placeholder="全部"/>
            </a-form-item>
          </a-col>
          <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="支付单号">
              <a-input placeholder="请输入支付单号" v-model="queryParam.payOrderNo"></a-input>
            </a-form-item>
          </a-col> -->

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="开票类型">
              <a-select :default-value="null" placeholder="全部" v-model="queryParam.invoiceType" @change="searchQuery">
                <a-select-option :value="null">
                  全部
                </a-select-option>
                <a-select-option :value="0">
                  不开票
                </a-select-option>
                <a-select-option :value="1">
                  个人发票
                </a-select-option>
                <a-select-option :value="2">
                  企业发票
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="10" :lg="7" :md="8" :sm="24">
            <a-form-item label="创建时间">
              <a-range-picker format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']" @change="onDateChange"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-radio-group :default-value="null" v-model="queryParam.status" @change="searchQuery" button-style="solid">
        <a-radio-button :value="null">
          全部
        </a-radio-button>
        <a-radio-button :value="1">
          待付款
        </a-radio-button>
        <a-radio-button :value="7">
          走款中
        </a-radio-button>
        <a-radio-button :value="2">
          待发货
        </a-radio-button>
        <a-radio-button :value="3">
          已发货
        </a-radio-button>
        <a-radio-button :value="4">
          待评价
        </a-radio-button>
        <a-radio-button :value="5">
          交易取消
        </a-radio-button>
        <a-radio-button :value="6">
          交易完成
        </a-radio-button>
      </a-radio-group>
      <a-divider type="vertical"/>

      <a-button type="primary" icon="download" @click="handleExportXls('订单')">导出</a-button>
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="orderNo"
               :columns="shopType==4?columns1:columns" :dataSource="dataSource"
               :pagination="ipagination" :loading="loading"
               class="j-table-force-wrap" @change="handleTableChange">

        <template slot="skuList" slot-scope="text, record">
          <div v-for="(item,index) in record.skuList" :key="index" :class="record.skuList.length==index+1?'':'b-b'">
            <div style="display:flex;">
              <div style="padding:4px;">
                <img style="width:40px;" :src="item.imgUrl">
              </div>
              <div style="flex:1;padding:4px;text-align:left;border-right:solid 1px #dddddd;min-height:62px;">
                <div
                  style="width:120px;white-space: normal;word-break: break-all;word-wrap: break-word;color:#333333;line-height:18px;">
                  {{ item.spuName }}
                </div>
                <div
                  style='margin-top: 5px;width:120px;white-space: normal;word-break: break-all;word-wrap: break-word;font-size:12px;'>
                  {{ item.skuName }}
                </div>
              </div>
              <div style="width:100px;text-align:left;border-right:solid 1px #dddddd;padding:4px;min-height:62px;">
                <b>类型：</b>{{ record.type_dictText }}<br>
                <b>金额：</b>{{ item.skuPrice }}<br>
                <b>数量：</b>{{ item.num }}件
              </div>
              <div style="width:60px;text-align:center;padding:4px;font-size:12px;">
                <span v-if="item.refundNo">{{ item.refundStatus == 2 ? '退款成功' : '退款中' }}</span>
                <a v-else-if="(record.status==2||record.status==3)&&(shopType==1||shopType==3)"
                   @click="activeRefund(item,record.freight)">可主动退款</a>
              </div>
            </div>
          </div>
        </template>
        <template slot="skuList1" slot-scope="text, record">
          <div v-for="(item,index) in record.skuList" :key="index" :class="record.skuList.length==index+1?'':'b-b'">
            <div style="display:flex;">
              <div style="padding:4px;">
                <img style="width:40px;" :src="item.imgUrl">
              </div>
              <div style="flex:1;padding:4px;text-align:left;border-right:solid 1px #dddddd;min-height:62px;">
                <div
                  style="width:120px;white-space: normal;word-break: break-all;word-wrap: break-word;color:#333333;line-height:18px;">
                  {{ item.spuName }}
                </div>
                <div
                  style='margin-top: 5px;width:120px;white-space: normal;word-break: break-all;word-wrap: break-word;font-size:12px;'>
                  {{ item.skuName }}
                </div>
              </div>
              <div style="width:100px;text-align:left;border-right:solid 1px #dddddd;padding:4px;min-height:62px;">
                <b>类型：</b>{{ record.type_dictText }}<br>
                <b>供货金额：</b>{{ item.subSupplyPrice }}<br>
                <b>数量：</b>{{ item.num }}件
              </div>
              <div style="width:60px;text-align:center;padding:4px;font-size:12px;">
                <span v-if="item.refundNo">{{ item.refundStatus == 2 ? '退款成功' : '退款中' }}</span>
                <a v-else-if="(record.status==2||record.status==3)&&(shopType==1||shopType==3)"
                   @click="activeRefund(item,record.freight)">可主动退款</a>
              </div>
            </div>
          </div>
        </template>

        <template slot="shopInfo" slot-scope="text, record">
          {{ record.shopName }}<br>{{ record.supplierName ? '(供应商：' + record.supplierName + ')' : '' }}
        </template>
        <template slot="addressInfoObj" slot-scope="text, record">
          {{ record.nickname }}<br>{{ record.addressInfoObj.name }}<br>{{ record.addressInfoObj.tel }}
        </template>
        <template slot="remindTimeSlot" slot-scope="text, record">
          <div v-if="record.remindTime"
               style="width:80px;white-space: normal;word-break: break-all;word-wrap: break-word;color:red;">
            {{ record.remindTime + "提醒" }}
          </div>
          <div v-if="!record.remindTime" style="width:80px;">
            未提醒
          </div>
        </template>

        <template slot="payInfo" slot-scope="text, record">
          <div style="text-align:left;"><b>支付金额：</b>{{ record.amount }}</div>
          <div style="text-align:left;"><b>支付渠道：</b>{{ record.payChannel_dictText }}</div>
          <div style="text-align:left;">
            <b>发票信息：</b>{{ (record.invoiceType == null) ? "无发票" : record.invoiceType == 1 ? '个人发票' : '企业发票' }}
          </div>
        </template>
        <template slot="remarks" slot-scope="text, record">
          <div class="remarks">
            <div class="remarks-item"><b>买家留言：</b>{{ record.customerRemark }}</div>
            <div class="remarks-item" v-if="shopType==3||shopType==4"><b>店铺备注：</b>{{ record.shopRemark }}</div>
            <div class="remarks-item" v-if="shopType==1"><b>平台备注：</b>{{ record.platformRemark }}</div>
          </div>
        </template>
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="55px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleInfo(record)">查看</a>
          <br>
          <a @click="sRemark=true;shopRemark='';actOrderNo=record.orderNo;">订单备注</a>
          <br>
          <a
            v-if="record.status==2&&((shopType==1&&record.shopId=='A00001A00001'&&!record.supplierId)||(shopType==3||shopType==4))"
            @click="handleEditFH(record)">发货</a>
          <a
            v-if="record.status==3&&((shopType==1&&record.shopId=='A00001A00001'&&!record.supplierId)||(shopType==3||shopType==4))"
            @click="handleEditWL(record)">修改物流</a>
          <a v-if="record.status==1&&((shopType==1&&record.shopId=='A00001A00001')||shopType==3)"
             @click="handleEditGJ(record)">修改价格</a>
        </span>

      </a-table>
    </div>

    <oms-order-modal ref="modalForm" @ok="modalFormOk"></oms-order-modal>

    <deliver-modal ref="deliverForm" @ok="modalFormOk"/>
    <remark-modal ref="remarkForm" @ok="modalFormOk"/>
    <update-modal ref="updateForm" @ok="modalFormOk"/>
    <change-deliver ref="changeDeliver" @ok="modalFormOk"/>
    <a-modal title="主动退款" :visible="active_refund_visible" :confirm-loading="active_refund_confirmLoading"
             @ok="activeRefundOk"
             @cancel="handleCancel">
      <p style="text-align: center;">运费价格：{{ price.freight }}</p>
      <p style="text-align: center;">商品折扣后价格：{{ price.payAmount }}</p>
      <p>
        主动退款金额：
        <a-input-number placeholder="主动退款金额"
                        :min="0.01"
                        :precision="2"
                        v-model="active_refund_amount"
                        :max="max_refund_amount"></a-input-number>
      </p>
      <p>
        主动退款原因：
        <a-textarea
          v-model="active_refund_reason"
          placeholder="请输入主动退款原因"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
        <!--        <a-input placeholder="主动退款原因" v-model="active_refund_reason"></a-input>-->
      </p>
    </a-modal>
    <a-modal title="订单备注" :visible="sRemark" :confirm-loading="active_refund_confirmLoading" @ok="upRemark"
             @cancel="sRemark= false">
      <p>
        <a-textarea placeholder="请输入内容" :rows="4" v-model="shopRemark"/>
      </p>
    </a-modal>
  </a-card>
</template>

<script>
import Vue from 'vue'
import {SHOP_TYPE, ORG_CODE} from "@/store/mutation-types"
import {postAction} from '@/api/manage'
import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/MyJeecgListMixin'
import OmsOrderModal from './modules/OmsOrderModal'
import DeliverModal from './modules/DeliverModal'
import ChangeDeliver from './modules/ChangeDeliver'
import RemarkModal from './modules/RemarkModal'
import UpdateModal from './modules/UpdateModal'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import JDate from '@/components/jeecg/JDate.vue'

export default {
  name: 'OmsOrderList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    JDictSelectTag,
    JDate,
    OmsOrderModal,
    DeliverModal, UpdateModal, RemarkModal, ChangeDeliver
  },
  data() {
    return {
      //当前用户店铺类型1:平台，2：自营，3：店铺，4：供应商
      shopType: Vue.ls.get(SHOP_TYPE),
      //当前用户部门code
      orgCode: Vue.ls.get(ORG_CODE),
      actOrderNo: '',
      sRemark: false,
      shopRemark: '',
      description: '订单管理页面',
      active_refund_orderSkuId: '',
      active_refund_visible: false,
      active_refund_confirmLoading: false,
      active_refund_amount: 0,
      max_refund_amount: 0,
      price: {
        freight: 0,
        payAmount: 0,
      },
      active_refund_reason: '',
      // 表头
      columns: [
        {
          title: '订单编码',
          align: "center",
          dataIndex: 'orderNo'
        },
        {
          title: '店铺',
          align: "center",
          dataIndex: 'shopName',
          scopedSlots: {customRender: 'shopInfo'}
        },
        {
          title: '商品信息',
          align: "center",
          dataIndex: 'skuList',
          scopedSlots: {customRender: 'skuList'}
        },
        {
          title: '买家/收货人',
          align: "center",
          dataIndex: 'addressInfoObj',
          scopedSlots: {customRender: 'addressInfoObj'}
        },
        {
          title: '支付/发票',
          align: "center",
          dataIndex: 'amount',
          scopedSlots: {customRender: 'payInfo'}
        },
        {
          title: '下单时间',
          align: "center",
          width: 100,
          dataIndex: 'createTime',
          sorter: true,
        },
        {
          title: '提醒发货',
          align: "center",
          dataIndex: 'remindTime',
          sorter: true,
          scopedSlots: {customRender: 'remindTimeSlot'}
        },
        {
          title: '订单状态',
          align: "center",
          dataIndex: 'status_dictText',
          sorter: true,
        },
        {
          title: '留言/备注',
          align: "center",
          dataIndex: 'customerRemark',
          scopedSlots: {customRender: 'remarks'}
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
      // 供应商表头
      columns1: [
        {
          title: '订单编码',
          align: "center",
          dataIndex: 'orderNo'
        },
        {
          title: '店铺',
          align: "center",
          dataIndex: 'shopName',
          scopedSlots: {customRender: 'shopInfo'}
        },
        {
          title: '商品信息',
          align: "center",
          dataIndex: 'skuList',
          scopedSlots: {customRender: 'skuList1'}
        },
        {
          title: '买家/收货人',
          align: "center",
          dataIndex: 'addressInfoObj',
          scopedSlots: {customRender: 'addressInfoObj'}
        },
        // {
        //   title: '支付/发票',
        //   align: "center",
        //   dataIndex: 'amount',
        //   scopedSlots: { customRender: 'payInfo' }
        // },
        {
          title: '下单时间',
          align: "center",
          dataIndex: 'createTime',
          sorter: true,
        },
        // {
        //   title: '提醒发货',
        //   align: "center",
        //   dataIndex: 'remindTime',
        //   sorter: true,
        //   scopedSlots: { customRender: 'remindTimeSlot' }
        // },
        {
          title: '订单状态',
          align: "center",
          dataIndex: 'status_dictText',
          sorter: true,
        },
        {
          title: '留言/备注',
          align: "center",
          dataIndex: 'customerRemark',
          scopedSlots: {customRender: 'remarks'}
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
      url: {
        list: "/mallBase/omsOrder/list",
        delete: "/mallBase/omsOrder/delete",
        deleteBatch: "/mallBase/omsOrder/deleteBatch",
        exportXlsUrl: "/mallBase/omsOrder/exportSkuXls",
        importExcelUrl: "mallBase/omsOrder/importExcel",
      },
      dictOptions: {},
    }
  },
  created() {
    if (this.$route.query.id) {
      this.queryParam.uid = this.$route.query.id
    }
    this.loadData()
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    initDictConfig() {
    },
    handleInfo(record) {
      this.$router.push({path: '/order/mng/OmsOrderInfo', query: {id: record.orderNo, type: record.type}})
    },
    upRemark() {
      const self = this
      postAction('/mallBase/omsOrder/orderRemark', {
        orderNo: self.actOrderNo,
        remark: self.shopRemark
      }).then(res => {
        self.sRemark = false
        self.modalFormOk()
      })
    },
    activeRefund(item, freight) {
      this.active_refund_orderSkuId = item.id
      this.active_refund_visible = true
      let freightNormal = freight == null ? 0 : freight;
      console.log("运费信息", freightNormal);
      this.max_refund_amount = item.subTotal * 1 - parseFloat((item.shopCouponDiscount * 1 + item.couponDiscount * 1 + item.integralDiscount * 1 + item.vipDiscount * 1) || 0) + parseFloat(item.changePrice * 1 || 0) + parseFloat(freightNormal);
      console.log("添加运费后的价格", this.max_refund_amount);
      this.active_refund_amount = (item.subTotal * 1 - parseFloat((item.shopCouponDiscount * 1 + item.couponDiscount * 1 + item.integralDiscount * 1 + item.vipDiscount * 1) || 0) + parseFloat(item.changePrice * 1 || 0)).toFixed(2)
      this.price.freight = freightNormal;
      this.price.payAmount = this.active_refund_amount;
      this.active_refund_reason = ""
    },
    handleCancel(e) {
      this.active_refund_visible = false
    },
    activeRefundOk(item) {
      let self = this
      console.log(self.active_refund_amount)
      if (self.active_refund_amount < 0.01) {
        self.$message.warning("主动退款金额不能小于0.01")
        return
      }
      if (!self.active_refund_reason) {
        self.$message.warning("主动退款原因不能为空")
        return
      }
      self.active_refund_confirmLoading = true
      postAction('/mallBase/omsOrderRefund/activeRefund', {
        orderSkuId: self.active_refund_orderSkuId,
        refundPrice: parseFloat(self.active_refund_amount),
        closeReason: self.active_refund_reason
      }).then(res => {
        self.active_refund_confirmLoading = false
        self.active_refund_visible = false
        self.modalFormOk()
      }).catch(() => {
        self.active_refund_confirmLoading = false
        self.active_refund_visible = false
      })
    },
    handleEditFH(record) {
      console.log(record)
      this.$refs.deliverForm.edit(record)
      this.$refs.deliverForm.title = '发货'
      this.$refs.deliverForm.ruleForm.orderNo = record.orderNo
    },
    handleEditWL(record) {
      console.log(record)
      this.$refs.changeDeliver.edit(record)
    },
    handleEditBZ(record) {
      console.log(record)
      this.$refs.remarkForm.edit(record)
      this.$refs.remarkForm.title = '备注'
      this.$refs.remarkForm.ruleForm.orderNo = record.orderNo
    },
    handleEditGJ(record) {
      this.$refs.updateForm.title = '修改价格'
      this.$refs.updateForm.ruleForm.orderNo = record.orderNo
      this.$refs.updateForm.edit(record)
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.b-b {
  border-bottom: solid 1px #dddddd;
  text-align: left;
}

.b-b:last-child {
  border-bottom: none;
  text-align: left;
}

.remarks {
  font-size: 11px;
  width: 150px;
  text-align: left;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}

.remarks-item {
  background-color: #f4f4f4;
  padding: 5px;
  margin-bottom: 4px;
  border-radius: 4px;
}
</style>
